<template>

  <div class="ques-list">
    <el-row class="ques-head">
      <el-col :span="2">ID</el-col>
      <el-col :span="6">题名</el-col>
      <el-col :span="3">分数</el-col>
      <el-col :span="3">难度</el-col>
      <el-col :span="6">标签</el-col>
      <el-col :span="4">操作</el-col>
      <el-tooltip placement="bottom" content="新增题目">
        <span class="m-editor-tool-icon" @click="addProblem" >
          <el-icon :size="20"><document-add /></el-icon>
        </span>
      </el-tooltip>
    </el-row>
    <div v-if="problems.length === 0 ">
      <el-empty description="题目列表为空"></el-empty>
    </div>
    <div v-else v-for="p in problems" :key="p.id">
      <div class="ques-row">
        <el-row style="display: flex;align-items: center">
          <el-col :span="2">{{p.id}}</el-col>
          <el-col :span="6">{{p.name}}</el-col>
          <el-col :span="3">{{p.point}}</el-col>
          <el-col :span="3">
            <el-tag type="danger" v-if="p.level==3">
              困难
            </el-tag>
            <el-tag type="warning" v-else-if="p.level==2">
              中等
            </el-tag>
            <el-tag type="success" v-else>
              简单
            </el-tag>
          </el-col>
          <el-col :span="6" >
            <el-tag v-for="t in p.tags" style="margin: 0 10px">
              {{getTagName(t)}}
            </el-tag>
          </el-col>
          <el-col :span="4">
            <el-tooltip placement="bottom" content="查看详情">
              <router-link :to="'/work/'+p.id" target="_blank">
                <el-icon class="m-manage-icon"><info-filled /></el-icon>
              </router-link>
            </el-tooltip>
            &nbsp;&nbsp;
            <el-tooltip placement="bottom" content="编辑">
                <el-icon class="m-manage-icon cpt" @click="editProblem(p.id)"><edit /></el-icon>
            </el-tooltip>
          </el-col>

        </el-row>
      </div>
    </div>
  </div>
  <el-dialog v-model="modalVisible" :title="editOrInsert ? '修改题目' : '新增题目'" width="80%" :before-close="onCloseModal">
    <AddOrUpdateProblem v-if="modalVisible" :pid="nowPid" :is-edit="editOrInsert" @doCloseModal="closeModal" />
  </el-dialog>
</template>

<script>
import {Problem} from "../../utils/http/problem";
import {Tag} from "../../utils/http/tags";
import {InfoFilled,Edit,DocumentAdd} from "@element-plus/icons";
import { ElMessageBox } from 'element-plus'

export default {
  name: "ProblemManage",
  components:{
    InfoFilled,Edit,DocumentAdd
  },
  data:function (){
    return {
      problems : [],
      editOrInsert : true,
      nowPid : 0,
      modalVisible : false
    }
  },
  methods:{
    async getAllProblem(){
      let resp = await Problem.getAll()
      let ps = resp.data.problems
      ps.forEach(p => p.tags = JSON.parse(p.tags))
      this.problems = ps;
    },
    getTagName : Tag.getTagById,
    editProblem(id){
      this.nowPid = id
      this.editOrInsert = true
      this.modalVisible = true
    },
    addProblem(){
      this.editOrInsert = false
      this.modalVisible = true
    },
    closeModal(){
      this.modalVisible = false
      this.getAllProblem()
    },
    onCloseModal(done){
      ElMessageBox.confirm(
        '您的修改尚未保存，确认关闭？',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          done()
        })
        .catch(()=>{})
    }
  },
  mounted() {
    this.getAllProblem();
  }
}
</script>

<style scoped>

.ques-head{
  color: black;
  font-size: 16px;
  height: 45px;
  line-height: 45px;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12);
}

.ques-row{
  padding: 10px 0;
}

.m-manage-icon {
  font-size: 20px;
  color: #53a8ff;
}

.cpt {
  cursor: pointer;
}
.m-editor-tool-icon{
  cursor: pointer;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
  border: 1px solid #b3d8ff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #409eff;
  position: absolute;
  right: 20px;
  top: 10px;
  z-index: 9;
}

.ques-row:hover{
  background: #eee;
}

</style>
